<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/app.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-search mui-pull-left main-bold header-icon" id="header_icon_search" style="color: #FFFFFF;display: none;"></a>
			<h1 class="mui-title" id="title" style="color: #FFFFFF;">学园</h1>
			<a class="mui-icon mui-icon-plusempty mui-pull-right main-bold header-icon" id="header_icon" style="color: #FFFFFF;display: none;"></a>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" id="messages" href="inform.html">
				<i class="mui-icon iconfont icon-mymessage">
					<div id="msgCount" style="display:none;border-radius:50%;width: 10px;height: 10px;background-color: red;position: absolute;top:0px;right: -8px;"></div>
				</i>
				<div class="mui-tab-label">消息</div>
			</a>
			<a class="mui-tab-item" id="circle" href="my_circle.html">
				<i class="mui-icon iconfont icon-mycircle"></i>
				<div class="mui-tab-label">圈子</div>
			</a>
			<a class="mui-tab-item" id="follows" href="follows_trends.html">
				<i class="mui-icon iconfont icon-myconcern"></i>
				<div class="mui-tab-label">关注</div>
			</a>
			<a class="mui-tab-item" id="mine" href="mycenter.html">
				<i class="mui-icon iconfont icon-center"></i>
				<div class="mui-tab-label">我的</div>
			</a>
		</nav>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();

			var tab_inform, tab_circle, tab_trends, tab_myCenter;
			var needGetTabInfos = false;
			var needCloseSplash = false;
			var canFire = false;


// ---------------------------------------------页面构建-------------------------------------------
			var subpages = ['inform.html', 'my_circle.html', 'follows_trends.html', 'mycenter.html'];
			var subpage_style = {
				top: '44px',
				bottom: '51px'
			};
			var aniShow = {};
			//创建子页面，首个选项卡页面显示，其它均隐藏；
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				for(var i = 0; i < 4; i++) {
					var temp = {};
					var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
					if(i===0){
						sub.addEventListener('loaded', function() {
							canFire = true;
						});
					}
					switch(i) {
						case 0:
							temp[subpages[i]] = "true";
							mui.extend(aniShow, temp);
							tab_inform = sub;
							break;
						case 1:
							tab_circle = sub;
							sub.hide();
							break;
						case 2:
							tab_trends = sub;
							sub.hide();
							break;
						case 3:
							tab_myCenter = sub;
							sub.hide();
							break;
						default:
							break;
					}
					self.append(sub);
				}
				
				if(needGetTabInfos) {
					getTabInfos();
				}
			});
			
// ---------------------------------------------dom事件绑定-------------------------------------------
			document.getElementById("header_icon").addEventListener('tap',function () {
				openPage('../circle/addCircle.html','addCircle');
			},false);
			document.getElementById("header_icon_search").addEventListener('tap',function () {
				openPage('../index/search.html','search');
			},false);
			
			var activeTab = subpages[0];
			var title = document.getElementById("title");
			//选项卡点击事件
			mui('.mui-bar-tab').on('tap', 'a', function(e) {
				var targetTab = this.getAttribute('href');
				var targetTabId = this.id;
//				console.log(targetTab);
				if(targetTab == activeTab) {
					return;
				}
				//更换标题
				title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
				document.getElementById("header_icon").style.display = "none";
				document.getElementById("header_icon_search").style.display = "none";
				if(targetTabId == "circle") {
					document.getElementById("header_icon").style.display = "";
					document.getElementById("header_icon_search").style.display = "";
				}

				//显示目标选项卡
				if(mui.os.ios || aniShow[targetTab]) {
//					console.log(targetTab);
					plus.webview.show(targetTab);
				} else {
					var temp = {};
					temp[targetTab] = "true";
					mui.extend(aniShow, temp);
					plus.webview.show(targetTab, "fade-in", 300);
				}
				//隐藏当前;
				plus.webview.hide(activeTab);
				activeTab = targetTab;
			});
			
			//首页返回键处理
			//处理逻辑：1秒内，连续两次按返回键，则退出应用；
			var first = null;
			mui.back = function() {
				if(activeTab !== subpages[0]) {
					mui.trigger(document, 'gohome');
					return;
				}
				//首次按键，提示‘再按一次退出应用’
				if(!first) {
					first = new Date().getTime();
					mui.toast('再按一次退出');
					setTimeout(function() {
						first = null;
					}, 1000);
				} else {
					if(new Date().getTime() - first < 1000) {
						plus.runtime.quit();
					}
				}
			};
// ---------------------------------------------webview事件绑定-------------------------------------------
			document.addEventListener('show', function(data) {
				needCloseSplash = data.detail.closeSplash;
				if(typeof(tab_inform) === "undefined") {
					console.log('need get tab infos');
					needGetTabInfos = true;
					return;
				}
				getTabInfos();
			});
			document.addEventListener('relogin', function() {
				getTabInfos();
				mui.trigger(document, 'gohome');
			})
			//自定义事件，模拟点击“首页选项卡”
			document.addEventListener('gohome', function(e) {
				var defaultTab = document.getElementById("messages");
				//模拟首页点击
				mui.trigger(defaultTab, 'tap');
				//切换选项卡高亮
				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
				if(defaultTab !== current) {
					current.classList.remove('mui-active');
					defaultTab.classList.add('mui-active');
				}
				if(e.detail && e.detail.show) {
					showPage(self, e.detail.ani);
				}
				if(e.detail && e.detail.srcwv) {
					plus.webview.close(e.detail.srcwv, 'none');
				}
			});
			// 显示首页并通知 tab 页获取数据
			function getTabInfos() {
//				console.log("come in getTabInfos_"+canFire);
				
				if(!canFire){
					setTimeout(getTabInfos, 100);
				}
				
				plus.webview.currentWebview().show(needCloseSplash ? 'none' : animation.popIn);
				if(needCloseSplash) plus.navigator.closeSplashscreen();

				$.fire(tab_inform, 'show', null);
				$.fire(tab_circle, 'show', null);
				$.fire(tab_trends, 'show', null);
				$.fire(tab_myCenter, 'reload', null);

				//				plus.nativeUI.closeWaiting();	由 inform 中的 refreshNotify 控制关闭
			}
			document.addEventListener('updateBadge',function (e) {
				if(e.detail && e.detail.msgBadge){
					$('#msgCount').show();
				}else{
					document.getElementById("msgCount").display='none';
					$('#msgCount').hide();
				}
			})
		</script>
	</body>

</html>